<template>
  <div class="container">
    <div class="wx-image">
      <div class="wx">
        <img :src="url" alt="">
      </div>
      欢迎微信扫码加入企业微信沟通群
    </div>
    <a-button type="primary" v-if="isAdmin" class="upload-button">
      <input type="file" accept="image/*" @change="handlerUploadImage">
      更新图片
    </a-button>
  </div>
</template>

<script>
// 演示如何使用 this.$dialog 封装 modal 组件

import { userModule } from '@/store/modules/user'
import { helpServices } from '@/common/services/help'
import { AuthMixin } from '@/mixin'
export default {
  name: 'StandardList',
  mixins: [AuthMixin],
  components: {
  },
  data () {
    return {
      url: ''
    }
  },
  computed: {
    user () {
      return userModule.userInfo
    },
    isAdmin() {
      return this.user.usr_act === 'admin'
    }
  },

  mounted () {
    this.getWxImage()
  },

  methods: {
    getWxImage() {
      helpServices.getWx().then(_ => {
        this.url = _.data.img || ''
      })
    },
    handlerUploadImage(e) {
      const file = e.target.files[0]
      helpServices.setWx(file).then(_ => {
        if (_.data.img) {
          this.url = _.data.img
        }
        this.$message.success('微信二维码更新成功');
      })
    }
  }
}
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.wx-image {
  text-align: center;
  font-size: 24px;
  margin-bottom: 20px;
}
.wx {
  width: 360px;
  height: 460px;
  overflow: hidden;
  margin-bottom: 20px;
  img {
    max-width: 100%;
    position: relative;
    transform: translateY(-50%);
    top: 50%;
    left: 0;
  }
}
</style>
